import { SearchOutlined } from '@ant-design/icons';
import { Input } from 'antd';
import { CSSProperties, useCallback, useRef, LegacyRef, RefObject } from 'react';
import { debounce } from '../utils/debounce';

const defaultProps = {
    placeholder: '搜索', 
    style: {
        width: '260px', 
        backgroundColor: 'red'
    },
    
}
export function SearchInput(props: {placeholder?: string, style?: CSSProperties, dataChange?: (val: string) => void}) {
    let newProps = Object.assign({}, defaultProps, props);

    const inputRef: LegacyRef<Input> = useRef<any>();
    let onChange = debounce((e: any) => {
        props.dataChange && props.dataChange(inputRef!.current!.state.value);
    },1000);
    return (
        <div style={{width: newProps.style!.width}}>
            <Input ref={inputRef} style={props.style} placeholder={props.placeholder} prefix={<SearchOutlined />} onChange={onChange}/>
        </div>
    );
}